
<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!--bootstrap-->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

  <!--My Styles-->
  <link href="<?php echo base_url();?>/css/search-form.css" rel="stylesheet" type="text/css" />

  <!--jqueryUI-->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/blitzer/jquery-ui.min.css" />

  <!--cdn google-->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

  <!--bootstrap-->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

  <!--jquery datepicker-->
  <script type="text/javascript" src="<?php echo base_url();?>/js/show_datepicker.js"></script>

  <!-- bootstrap3-typehead -->
  <script type="text/javascript" src="<?php echo base_url();?>/js/bootstrap3-typehead.js"></script>

</head>
<body>

  <nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home"></span> Home</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#"><span class="glyphicon glyphicon-calendar"></span> Travel itinerary</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-book"></span> Booking <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li role="presentation" class="dropdown-header">Traffic</li>
            <li><a href="#"><span class="glyphicon glyphicon-plane"></span>  Plane</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-road"></span>  Train</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-tree-conifer"></span>  Taxi</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation" class="dropdown-header">Place</li>
            <li><a href="#"><span class="glyphicon glyphicon-cutlery"></span>  Hotel</a></li>
          </ul>
        </li>
      </ul>
      <form id="custom-search-form" class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input id="SearchString" name="SearchString" type="text" class="form-control search-query" size="35" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default btn-lg">
          <span class="glyphicon glyphicon-search"></span>
        </button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> Setting <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Logout</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </nav>

  <h1>comment ajax</h1>
  <input class="datepicker" />

  <div class="row">

    <div class="col-lg-2"></div>

    <div class="col-lg-8" id="list-comments">

      <?php
      foreach($results as $row)
       {?>

     <div class="row"> <?php echo $row->name; ?> </div>
     <hr />

     <?php } ?>


   </div>

   <div class="col-lg-2">
   </div>

 </div><!--/row-->

 <div class="row">
  <div class="col-lg-2"></div>

  <div class="col-lg-8">

   <form role="form" id="foo" action="<?php echo base_url(); ?>/index.php/Category_controller/create" method="post" accept-charset="utf-8">

    <div class="form-group">

      <div class="row">

        <div class="col-lg-4">
          <!-- <textarea name="categoryname" id="categoryname" class="form-control" rows="3"></textarea> -->
          <input type="text" name="categoryname" class="form-control" id="categoryname" />
        </div>

      </div>
    </div>

<!--     <div class="row"> -->
      <button type="submit" class="btn btn-default">Submit</button>
    <!-- </div> -->
  </form>

</div>
</div>


<script type="text/javascript">

  $(document).ready(function() {


// variable to hold request
var request;
// bind to the submit event of our form
$("#foo").submit(function(event){
    // abort any pending request
    if (request) {
      request.abort();
    }
    // setup some local variables
    var $form = $(this);
    // let's select and cache all the fields
    var $inputs = $form.find("input, select, button, textarea");
    // serialize the data in the form
    var serializedData = $form.serialize();

    // let's disable the inputs for the duration of the ajax request
    $inputs.prop("disabled", true);

    // fire off the request to /form.php
    request = $.ajax({
      url: "<?php echo base_url();?>/index.php/Category_controller/insert_comment",
      type: "post",
      data: serializedData
    });

    // callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){
        // alert($('#categoryname').val());
        $('#list-comments').append( "<div class='row'> " + $('#categoryname').val() + " </div><hr />" );
        $inputs.prop("disabled", false);
        $('#categoryname').val('');
      });

    // callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){
        // log the error to the console
        alert('fail');
      });

    // callback handler that will be called regardless
    // if the request failed or succeeded
    request.always(function () {
        // reenable the inputs
        $inputs.prop("disabled", false);
      });

    // prevent default posting of form
    event.preventDefault();
  });

});

</script>

</body>
</html>